<template>
 <div class="login">
   <div class="loginbox">
       <div class="fbox">登录页面</div>

<el-form class="inpbox" :model="loginform"  :rules="formrules" ref="formref" >
 
  <el-form-item label="用户名" prop="username">
    <el-input prefix-icon="iconfont icon-3702mima" v-model="loginform.username"></el-input>
  </el-form-item>
  
   <el-form-item label="密码" prop="password">
    <el-input prefix-icon="iconfont icon-users" v-model="loginform.password" type="password"></el-input>
  </el-form-item>
   
    <el-form-item class="btn">
    <el-button type="primary" plain @click="login">登录</el-button>
  <el-button type="info"   plain @click="formreset">重置</el-button>
  </el-form-item>
  </el-form>
   
   </div>
 </div>
</template>
<script>
export default {
data(){
    return{
        loginform:{
            username:'admin',
            password:'123456',},

        formrules:{
              username: [
            { required: true,  message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
       { min: 6, max:20, message: '长度在 6 到 20个字符', trigger: 'blur' }
          ],
        }
        ,
      
       
        
    }
},
  methods:{
            //重置表单
            formreset(){
                this.$refs.formref.resetFields()
            },
            login(){
                this.$refs.formref.validate(async  valid=>{
                // console.log(valid);
                    if(!valid) return
                const {data:res}= await   this.$http.post('login',this.loginform)
            
              //  console.log(res);


                  if(res.meta.status!=200) return this.$message.error('登录失败')
              
              
               this.$message.success('登录成功')
               //登录后 token保存到sessionStorage
               window.sessionStorage.setItem('token',res.data.token)
               this.$router.push('/home')
                })
            }
        }
 }
</script>

<style lang="less" scoped >
.login{
    background-color: darkgray;
height: 100%;

.loginbox{
    width: 450px;
    height: 300px;
    background-color: whitesmoke;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
  transform: translate(-50%,-50%);
  .fbox{
      text-align: center;
      font-size: 20px;
font-weight: 900;
  }

}
}
.inpbox{
    padding:0 10px ;
}
.btn{
    float: right;
    padding-right: 10px;}

</style>